Vue + ArcGIS API for JavaScript 构建前端GIS应用（一）

写这篇总结的意义：总结，回顾，反思项目进行过程和这套“Vue + ArcGIS API for JavaScript”GIS前端应用技术路线，从项目与技术两个方面积累经验，寻找知识缺陷和项目优化空间，在总结的过程中学习。

• 技术路线的选择—vue + arcgis js api
• 技术学习内容汇总

工作上的一系列原因，导致后面的文章迟迟没有发出，鸽了良久，我感到深深的内疚。今天遇到一个契机，发现了分享和表达的重要性。因此决定，把后续的两篇一起更新了。废话不多说，现在开始吧。
传送门：
Vue + ArcGIS API for JavaScript 构建前端GIS应用（一）
Vue + ArcGIS API for JavaScript 构建前端GIS应用（二）
Vue + ArcGIS API for JavaScript 构建前端GIS应用（三）（含例子）

技术路线的选择—vue + arcgis js api

---

项目的技术路线是使用Vue+ArcGIS API for JavaScript构建一套gis前端应用，更加具体的技术路线实际上是 vue + vue-cli + vue-router + vuex + antd for vue + arcgis js api ，应用到了vue技术栈加上了最新版4.11的arcgis js api。最核心的问题就是vue与基于dojo开发的amd模式的api怎么集成？集成之后怎么使用？使用的时候会不会出现很多坑？本文作为全方位的总结，希望思路完整，所以还是从头说起。

Vue是目前前端三大流行框架之一（还包括React，Angular，来源于道听途说），她和React一样是一个表现层框架，专注于页面的渲染，并且，她和React一样都具有声明式渲染、组件化的特征。我是先接触React再接触Vue的，两者很多相似之处，至于说Vue学起来更容易轻松，我没有什么深切的体验，但确实Vue的中文资料更加丰富，毕竟算是国产。我跟单位的大师讨论过相关问题，我说Vue蛮好用的用户量貌似也蛮大，他说Vue只是在中国用户量大而已，他更偏向于相信大厂。不管怎么说，以这次项目对Vue的使用体验挺好。

Arcgis一直以来在gis领域算的上垄断地位，gis专业学生学校里学的，很多相关单位用的，都是Arcgis。他的产品体系庞大，从桌面端、客户端，到服务器，到在线服务，到大数据，到人工智能与gis相关或不那么相关的都有，她是成熟的gis商业软件，选她选的是靠谱。毕竟是美国的商业软件，过度依赖不是什么好事，一是钱的事，二是产权的事，越来越多开发者选择使用开源gis前端api，包括leaflet、mapbox等等。本次项目没有使用开源gis的要求，Arcgis自然是最好的选择。

技术学习内容汇总

---

单位之前没有使用这套技术路线进行过项目，甚至没有用vue做过项目，领导在项目前安排了大概3-4个小时的培训，相关技术的学习路线汇总，如下：

• 环境

  • node.js
  • NVM - Node Version Manager( nodejs版本管理工具 )
  • npm cnpm yarn
  • 开发工具 vscode
  • Emmet

• 预备知识体系

  • ES6 - 重点看： let; const; 结构赋值; 对象扩展; 函数扩展; SET; MAP; Iterator; Promise; asnyc-await;
  • CommonJS amd 参考阮一峰模块化编程
  • MVVM模式
  • Webpack
  • Babel -包括polyfill
  • Sass

• vue + vue router + vuex + axios + antd技术栈

  • vue

    • vue-loader
    • vue的生命周期
    • 父子组件之间通信、子父组件间通信
  • vue-cli 脚手架工程

  • vue-router

    • 设置动态路由，动态获取js，减少一次性的加载量，提高页面响应速度
    • 路由传参
  • vuex
• arcgis api 4.11